<template>
  <div id="v1"> 
    <h1>人员管理</h1>
    <div class="mb-3 row">
  <label class="col-form-label" style="width: 80px;">姓名：</label>
  <input type="text" class="form-control" style="width: 150px;" v-model="newPerson.name">

  <label class="col-form-label" style="width: 80px;">年龄：</label>
  <input type="text" class="form-control" style="width: 50px;" v-model="newPerson.age">

  <label class="col-form-label" style="width: 80px;">性别：</label>
  <select v-model="newPerson.sex" style="width: 100px;" class="form-select">
    <option value="Male">男</option>
    <option value="Female">女</option>
  </select>

  <button @click="add()"  style="width: 100px; margin-left: 10px;" class="btn btn-primary">添加</button>
</div>
    <hr>
    <table class="table table-bordered border-primary">
        <tbody>
        <tr class="table-primary">
            <td>姓名</td>
            <td>年龄</td>
            <td>性别</td>
            <td>操作</td>
        </tr>
        <tr v-for="(stu,index) in people" :key="index">
            <td>{{ stu.name }}</td>
            <td>{{ stu.age }}</td>
            <td>{{ stu.sex }}</td>
            <td><button @click="remove(index)" class="btn btn-danger">删除</button></td>
        </tr>
      </tbody>
    </table>
    <div class="mb-3 row" >
    <label class="col-form-label" style="width: 80px; ">姓名：</label>
    <input type="text" class="form-control" style="width: 80px;" v-model="searchName">
    <button @click="search(searchName)" style="display: inline-block; margin-left: 10px; width:100px" class="btn btn-primary">搜索</button>
    <button @click="cancelSearch()" style="display: inline-block; margin-left: 10px; width:100px" class="btn btn-primary">取消搜索</button>
    </div>
  </div>
  </template>
  <script>
  import { reactive, toRefs } from 'vue'
  
  export default {
    setup () {
      const state = reactive({
        newPerson: {
        name: "",
        age: 0,
        sex: "Male"
      },
      people: [
        {
          name: "李刚",
          age: 30,
          sex: "Male"
        },
        {
          name: "玛丽",
          age: 26,
          sex: "Male"
        },
        {
          name: "王琦",
          age: 22,
          sex: "Female"
        },
        {
          name: "林黛玉",
          age: 36,
          sex: "Male"
        }
      ],
      searchName: "",
      searchPeople: [],
      oldPeople: [],
      })
      const add = () => {
        state.people.push(state.newPerson)
        state.newPerson = {
          name: "",
          age: 0,
          sex: "Male"
        }}
      const remove = (index) => state.people.splice(index,1)
      const search = (searchName) => {
        state.oldPeople = state.people
      state.searchPeople = state.people.filter(person =>
        state.searchPeople=person.name.includes(searchName)
      );
      state.people = state.searchPeople
      
    };
      const cancelSearch = () => {
        state.people = state.oldPeople
      }
      return {
        ...toRefs(state),
        add,
        remove,
        search,
        cancelSearch
    }
    }
  }
  
  </script>
  
  <style scoped>
*{
  margin: 0;
  padding: 0;
}
#v1{
  width: 1000px;
  margin: 0 auto;
}
  </style>
  